<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="dialogFormVisible = true">权限添加</el-button>
    <!--    数据表格-->
    <el-table
            ref="functionTable"
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="名称"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.menuName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="描述"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.menuPermission}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="url"
        >
            <template slot-scope="scope">
                <span >{{scope.row.menuUrl}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="pid"
        >
            <template slot-scope="scope">
                <span >{{scope.row.menuPid}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="functionEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="functionDelete(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="角色管理" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="fun">
            <el-form-item label="权限名" :label-width="formLabelWidth">
                <el-input v-model="fun.menuName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限描述" :label-width="formLabelWidth">
                <el-input v-model="fun.menuPermission" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="url" :label-width="formLabelWidth">
                <el-input v-model="fun.menuUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父类权限选择" :label-width="formLabelWidth" >
                <el-select  v-model="fun.menuPid" placeholder="请选择" >
                    <el-option v-for="item in fatherFunctionsData"
                               :label="item.menuName"
                               :value="item.id" ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveFunction()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData: null,
                fatherFunctionsData:null,
                total: 0,
                current: 1,
                pageSize: 10,
                dialogFormVisible: false,
                fun:{
                    id:'',
                    menuName:'',
                    menuPermission:'',
                    menuUrl:'',
                    menuPid:'',
                },formLabelWidth:"120px"
            }
        },
        methods:{
            loadPage(current) {
                this.current=current;
                axios.get("/functions/"+this.current)
                    .then(value => {
                       if (value.data.code=1){
                           this.tableData=value.data.data.records;
                           this.total=value.data.data.total;
                           this.current=value.data.data.current;
                           this.pageSize=value.data.data.pageSize;
                       }
                    });
            },functionEdit(index,row){
                this.fun=JSON.parse(JSON.stringify(row))
                this.dialogFormVisible=true;
            },functionDelete(index,row){
                if(confirm("确定删除吗")){
                    axios.delete("/functions/"+row.id).then(value => {
                       if(value.data.code==1){
                           this.loadPage(this.current);
                           this.$message(value.data.msg);
                       }
                    });
                }
            }, closeMyDialog(){
                this.fun={   //关闭对话框时更改product属性
                    id:'',
                    name:'',
                    description:'',
                    url:'',
                    pid:'',
                    icon:'',
                    sort:'',
                }
            },
            saveFunction(){
                    if(this.fun.id==''){
                        axios.post("/functions",this.fun).then(value => {
                            if(value.data.code == 1){
                                this.loadPage(this.current);
                                this.$message(value.data.msg);
                            }
                        });
                    }else{
                        axios.put("/functions",this.fun).then(value => {
                            if(value.data.code==1){
                                this.loadPage(this.current)
                                this.$message(value.data.msg);
                            }
                        });
                    }
                    this.dialogFormVisible=false;
                }
        },mounted(){
            axios.get("/fatherFunctions").then(value => {
                if (value.data.code==1){
                    this.fatherFunctionsData=value.data.data;
                }
            })
            this.loadPage(1);
        }

    })
</script>

</html>